<template>
    <div class="visual-editor">
        <header>
            <h3>
                编辑区域
                <template v-if="componentName !== ''"> - <span>{{ componentName }}</span></template>
            </h3>
        </header>
        <section>
            <compontent
                v-for="(item, index) in modules"
                :key="index"
                :is="`b-${item.module}`"
                :onlineData="item.data"
                :modules-index="index"
                v-if="item.setting">
            </compontent>
        </section>
    </div>
</template>
<script>
// mapState
import { mapState } from 'vuex'

// viusal components
import { BBlank, BTitle, BNav } from '@/components'

export default {
    components: {
        BBlank,
        BTitle,
        BNav
    },
    data() {
        return {}
    },
    computed: {
        ...mapState('viusal', ['modules', 'componentName'])
    }
}
</script>
<style lang="less" scoped>
@import '~@/assets/style/theme/index';
.visual-editor {
    position: absolute;
    left: 685px;
    top: 1px;
    bottom: 0;
    right: 1px;
    header {
        padding: 12px @gap;
        background: @table-thead-bg;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        h3 {
            font-size: 14px;
        }
        a {
            font-weight: normal;
            font-size: 12px;
            margin-left: 6px;
        }
        span {
            font-size: 13px;
            color: #777;
        }
    }
    section {
        padding: 20px 30px;
        position: absolute;
        bottom: 2px;
        top: 46px;
        right: 0;
        left: 0;
        overflow-y: auto;
        &::-webkit-scrollbar{
            overflow: hidden;
        }
    }
}
</style>


